<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  div{width: 50px;height: 50px;background: red;position: relative;top: 10px;
    left: 10px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Btn1 = document.getElementsByTagName('input')[0];
      var Btn2 = document.getElementsByTagName('input')[1];
      var Div = document.getElementsByTagName('div')[0];
      function getstyle(obj,attr){
        return obj.currentstyle ? obj.currentstyle[attr] : getComputedStyle(obj)[attr];  
      }
      function fun(obj,attr,dir,target){
        parseInt(getstyle( obj, attr )) < target ? dir : -dir;
        clearInterval(obj.timer)
        obj.timer = setInterval(function(){
          var speed = parseInt(getstyle(obj,attr)) + dir;
          if(speed > target && dir >0 || speed < target && dir < 0 ){
            speed = target;
          }
          obj.style[attr] = speed + 'px';
          if(speed == target){
            clearInterval(obj.timer);
          }
        },50)
      }
      Btn1.onclick = function(){
        fun(Div,'left',20,800);
      }
      Btn2.onclick = function(){
        fun(Div,'left',-20,10)
      }
    }
  </script>
</head>
<body>
  <input type="button" value="前进">
  <input type="button" value="后退">
  <div></div>
</body>
</html>